<!-- 任务编辑弹窗 -->
<template>
  <el-dialog
    title="添加名单"
    :visible="visible"
    width="60%"
    :destroy-on-close="false"
    :lock-scroll="false"
    @update:visible="updateVisible"
    v-loading.fullscreen.lock="fullscreenLoading">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="100px">
       <el-row :gutter="15">
         <el-col :sm="20">
           <el-form-item label="所属学院:" prop="organization">
               <el-select
                 filterable
                 clearable
                 v-model="form.organization"
                 @change="getDepartmentsList"
                 size="small"
                 placeholder="-请选择所属学院-"
                 class="ele-block">
                 <el-option v-for="item in schoolList" :key="item.id" :label="item.name" :value="item.id"/>
               </el-select>
           </el-form-item>
           <el-form-item label="所属院系:" ref="superior" prop="superior">
               <el-select
                 filterable
                 clearable
                 v-model="form.superior"
                 @change="getClassList"
                 size="small"
                 placeholder="-请选择院系-"
                 class="ele-block">
                 <el-option v-for="item in departmentsList" :key="item.id" :label="item.name" :value="item.id"/>
               </el-select>
           </el-form-item>
           <el-form-item label="班级:" ref="class" prop="class">
               <el-select
                 clearable
                 v-model="form.class"
                 @change="getMemberList"
                 size="small"
                 placeholder="-请选择班级-"
                 class="ele-block">
                 <el-option v-for="item in classList" :key="item.id" :label="item.name" :value="item.id"/>
               </el-select>
           </el-form-item>
         </el-col>

       </el-row>

      <el-row :gutter="15">
        <el-col :sm="24">
           <el-row style="display: flex;">
                      <el-col :sm="11" style="border: 1px solid #ebeef5;">
                        <div style="padding: 5px 15px 10px; background-color: #f5f7fa; border-radius: 3px;">
                          <el-form-item label-width="0">
                            <span style="float: left;">未选列表</span>
                            <span style="float: right;">{{ listArr.length }}</span>
                            <el-table :data="listArr" style="width: 100%;" border height="393" @selection-change="checkAll">
                              <el-table-column align="center" type="selection"></el-table-column>
                              <el-table-column prop="id" label="uid"></el-table-column>
                              <el-table-column prop="organization_name" label="所属组织"></el-table-column>
                              <el-table-column prop="superior_name" label="所属院系"></el-table-column>
                              <el-table-column prop="class_name" label="所属班级"></el-table-column>
                              <el-table-column prop="name" label="姓名"></el-table-column>
                              <el-table-column prop="sex" label="性别"></el-table-column>
                            </el-table>
                          </el-form-item>
                        </div>
                      </el-col>
                      <el-col :sm="2" style="padding: 0 10px; display: flex; flex-direction: column; justify-content: center; ">

                        <div style="display: flex; justify-content: center;">
                          <el-button class="middle-circle" icon="el-icon-arrow-right" :disabled="!leftData.length" size="mini" type="primary" @click="handelSelect" />
                        </div>

                        <div style="display: flex; justify-content: center;">
                          <el-button class="middle-circle" icon="el-icon-arrow-left" :disabled="!rightData.length" size="mini" type="primary" style="margin-top: 10px; margin-left: 0px;" @click="handleRemoveSelect" />
                        </div>
                      </el-col>
                      <el-col :sm="11" style="border: 1px solid #ebeef5;">
                        <div style="padding: 5px 15px 10px; background-color: #f5f7fa; border-radius: 3px;">
                          <el-form-item label-width="0">
                            <span style="float: left;">已选列表</span>
                            <span style="float: right;">{{ selectArr.length }}</span>
                            <el-table :data="selectArr" style="width: 100%;" border height="393" @selection-change="checkRightAll">
                              <el-table-column align="center" type="selection"></el-table-column>
                              <el-table-column prop="id" label="uid"></el-table-column>
                              <el-table-column prop="organization_name" label="所属组织"></el-table-column>
                              <el-table-column prop="superior_name" label="所属院系"></el-table-column>
                              <el-table-column prop="class_name" label="所属班级"></el-table-column>
                              <el-table-column prop="name" label="姓名"></el-table-column>
                              <el-table-column prop="sex" label="性别"></el-table-column>
                            </el-table>
                          </el-form-item>
                        </div>
                      </el-col>
                    </el-row>
        </el-col>
      </el-row>
          </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button
        type="primary"
        @click="save"
        :loading="loading">保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
// import uploadImage from '@/components/uploadImage'

export default {
  name: 'ListImport',
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  components: {},
  data() {
    return {
      // 表单数据
      //form: Object.assign({status:1}, this.data),
      // 表单验证规则
      rules: {
        organization: [
          {required: true, message: '请输入所属组织', trigger: 'blur'}
        ],
        superior: [
          {required: true, message: '请输入所属院系', trigger: 'blur'}
        ],
        class: [
          {required: true, message: '请输入所属班级', trigger: 'blur'}
        ],
            },
      searchParam: {},
      listArr: [],
      selectArr: [],
      changeArr: [],
      leftData: [], // 左边选中列表数据
      rightData: [], // 右边选中列表数据
      //加载状态
      fullscreenLoading: false,
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      // 学院列表
      schoolList: [],
      // 父级院系列表
      departmentsList: [],
      // 班级列表
      classList: [],

    };
  },
  watch: {
    data() {
        // console.log(this.data);
        this.form = {};
        //this.form = Object.assign({}, this.data);
        //this.selectArr = this.form.students;
        this.selectArr = [];
        // 获取已选名单列表
        this.getStudentsList();

    }
  },
  mounted() {
    // 获取学院列表
    this.getSchoolList();
    // 获取父级院系列表
    this.getDepartmentsList();
    // 获取班级列表
    this.getClassList();

    // 获取考核列表
    // this.getStandardList();
    // this.getStandardDetail();
  },
  methods: {
     checkAll(val) {
        this.leftData = val;
      },
      checkRightAll(val) {
        this.rightData = val;
      },
      // 穿梭框选中
      handelSelect() {
        for (let i = 0; i < this.selectArr.length; i++) {
          for (let j = 0; j < this.leftData.length; j++) {
            if (this.leftData[j].id === this.selectArr[i].id) {
              this.leftData = []; // 避免 左边勾选内容 leftData 与 右边内容 selectArr 重复
            }
          }
        }
        this.selectArr = this.handleConcatArr(
          this.selectArr,
          this.leftData
        );
        this.handleRemoveTabList(this.leftData, this.listArr);
        this.leftData = [];
      },
      // 穿梭框取消
      handleRemoveSelect() {
        this.listArr = this.handleConcatArr(this.listArr, this.rightData);
        this.handleRemoveTabList(this.rightData, this.selectArr);
        this.rightData = [];
      },
      handleConcatArr(selectArr, leftData) {
        let arr = [];
        arr = arr.concat(selectArr, leftData);
        return arr;
      },
      handleRemoveTabList(isNeedArr, originalArr) {
        if (isNeedArr.length && originalArr.length) {
          for (let i = 0; i < isNeedArr.length; i++) {
            for (let k = 0; k < originalArr.length; k++) {
              if (isNeedArr[i]["id"] === originalArr[k]["id"]) {
                originalArr.splice(k, 1);
              }
            }
          }
        }
      },
    /* 保存编辑 */
    save() {
          this.loading = true;
          this.form.select = JSON.stringify(this.selectArr);
          this.form.class = this.data;
          this.$http.post('/clss/saveImportlist', this.form).then(res => {
            this.loading = false;
            if (res.data.code === 0) {
              this.$message.success(res.data.msg);
              if (!this.isUpdate) {
                this.form = {};
              }
              this.updateVisible(false);
              this.$emit('done');
            } else {
              this.$message.error(res.data.msg);
            }
          }).catch(e => {
            this.loading = false;
            this.$message.error(e.message);
          });
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value);
    },
    /**
     * 获取组织列表
     */
    getSchoolList() {
      this.$http.get('/school/getSchoolList').then(res => {
        if (res.data.code === 0) {
          this.schoolList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },

    /**
     * 获取院系列表
     */
    getDepartmentsList() {
      if(this.form.organization){
        this.form.superior = null;
        this.form.class = null;
        this.$forceUpdate();
      }
      this.$http.post('/departments/getDepartmentsList',{sid:this.form.organization}).then(res => {
        if (res.data.code === 0) {
          this.departmentsList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },

    /**
     * 获取班级列表
     */
    getClassList() {
      if(this.form.superior){
        this.form.class = null;
        this.listArr = [];
        this.$forceUpdate();
      }
      this.$http.post('/clss/getClassList',{yid:this.form.superior}).then(res => {
        if (res.data.code === 0) {
          this.classList = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },

    /**
     * 获取已选名单列表
     */
    getStudentsList() {
      this.fullscreenLoading = true;
      this.$http.post('/clss/getStudentsList',{class:this.data}).then(res => {
        if (res.data.code === 0) {
          this.listArr = [];
          this.changeArr = [];
          this.selectArr = res.data.data;
          this.fullscreenLoading = false;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },

    /**
     * 获取名单列表
     */
    getMemberList() {
      this.fullscreenLoading = true;
      if(this.form.class){
        this.$forceUpdate();
      }
      this.$http.post('/member/getMemberList',{class:this.form.class}).then(res => {
        if (res.data.code === 0) {
          this.listArr = res.data.data;
          this.changeArr = [];
          this.selectArr = [];
          this.fullscreenLoading = false;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
  }
}
</script>

<style scoped>
</style>
